<template>
  <div class="rank">
    <div class="level">
      <span
        :class="[rank.activeIndex == index ? 'active' : '']"
        v-for="(level, index) in rank.level"
        :key="index"
        @click="handlerChangeLevel(level.subjectDifficult, index)"
      >
        {{ level.title }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";

const props = defineProps(["handlerLevel", "level"]);

const init = () => {
  setTimeout(() => {
    nextTick(() => {
      if (props.level) {
        rank.value.activeIndex = props.level - 1;
      }
    });
  }, 500);
};

init();

// 表单职级
const rank = ref({
  activeIndex: -1,
  level: [
    {
      subjectDifficult: 1,
      title: "初级",
    },
    {
      subjectDifficult: 2,
      title: "中级",
    },
    {
      subjectDifficult: 3,
      title: "高级",
    },
    {
      subjectDifficult: 4,
      title: "资深",
    },
    {
      subjectDifficult: 5,
      title: "专家",
    },
  ],
});

// 修改职级样式
const handlerChangeLevel = (subjectDifficult, index) => {
  rank.value.activeIndex = index;
  props.handlerLevel(subjectDifficult);
};
</script>

<style scoped lang="scss">
.level {
  span {
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 2px 15px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 13px;
    box-sizing: border-box;
    transition: all 0.4s;
    text-align: center;
  }
  span.active {
    color: rgba(36, 111, 215, 0.698);
    border: 1px solid rgb(157, 185, 227);
  }
}
</style>